import { BrowserRouter, useLocation, useRoutes, Navigate } from 'react-router-dom'
import React, { Suspense } from 'react'
import { routes } from './router';

const RouterView = () => useRoutes(routes)

function App() {
  return (
    <div className="App">

        <Suspense fallback={<div>路由加载zhong...</div>}>
          <RouterView></RouterView>
        </Suspense>
    </div>
  );
}

// 高阶组件就是一个函数， 函数的返回值是一个组件， 这个时候称这个函数是高阶组件
function withLogin(Comp) {
  return function () {
    const token = localStorage.getItem('token');
    const { pathname } = useLocation()  
    if(!token && pathname !== '/login') {
      return <Navigate to="/login"></Navigate>
    } 
    return <Comp></Comp>
  }
}


export default withLogin(App);
